<template>
    <div class="content">
        <div
            v-for="item in results.data"
            :key="item.name"
            class="business"
        >
            <p class="business-name">
                <IconPro0 class="business-name-icon"/>
                <span>{{ item.name }}</span>
            </p>
            <div class="direction">
                <div v-for="ite in item.children" :key="ite.name" class="direction-item">
                    <template v-if="item.name === '如流群'">
                        <span class="direction-item-name">
                            {{ ite.name }}
                        </span>
                        <span class="underline"></span>
                    </template>
                    <ul class="group">
                        <li v-for="i in ite.children" :key="getValue(i, '名称')" class="group-item">
                            <span class="group-item-logo">
                                {{ getValue(i, '名称').charAt(0) }}
                            </span>
                            <div class="group-item-content">
                                <span
                                    class="group-item-name"
                                    :title="getValue(i, '名称')"
                                >
                                    {{ getValue(i, '名称') }}
                                </span>
                                <span class="group-item-value">
                                    <IconEmail
                                        v-if="item.name === '邮件组'"
                                        class="group-item-value-icon"
                                    />
                                    <IconGroup
                                        v-else
                                        class="group-item-value-icon"
                                    />
                                    <span class="copy-box-value" :title="getValue(i, '值')">
                                        <template v-if="item.name === '如流群'">
                                            <a :href="`baidu://viewobject/?type=group&id=${getValue(i, '值')}`">
                                                {{ getValue(i, '值') }}
                                            </a>
                                        </template>
                                        <template v-else>
                                            {{ getValue(i, '值') }}
                                        </template>
                                    </span>
                                    <span class="copy-box">
                                        <IconCopy
                                            class="group-item-value-icon copy-box-icon"
                                            @click="copy(getValue(i, '值'))"
                                        />
                                    </span>
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div v-show="showToast" class="toast">已添加至剪切板</div>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {cloneDeep, groupBy} from 'lodash';

import list from '@/config/group.json';
import {copyClipboard, getValue} from '@/utils';

const results = cloneDeep(list) as any;
results.data.forEach((item: any, index: number) => {
    const groupsData = groupBy(list.data[index].children, (item: Record<string, string>) => item['方向']);
    item.children = [];
    Object.keys(groupsData).forEach((key: string) => {
        results.data[index].children.push({name: key, children: groupsData[key]});
    });
});

const showToast = ref(false);
const toast = () => {
    showToast.value = true;
    setTimeout(() => {
        showToast.value = false;
    }, 1500);
};
const copy = (value: string) => {
    copyClipboard(value).then(() => {
        toast();
    });
};
</script>

<style lang="less" scoped>
@import (reference) url('assets/styles/common.less');

.content {
    display: grid;
    grid-template-columns: 9fr 5fr;
    gap: 30px;

    .business {
        margin-top: 30px;
        padding: 0 36px;
        border-radius: 5px;
        background: @const-white-color;

        &-name {
            width: 100%;
            margin: 36px 0;
        }
        &:nth-of-type(2) .group {
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        }

        .direction-item-name {
            display: inline-block;
            font-weight: 600;
            font-size: 18px;
            padding-bottom: 10px;
        }
        .underline {
            display: block;
            width: 100%;
            height: 3px;
            margin-bottom: 40px;
            background: @bg-body-color;
        }
    }

    .group {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 30px 40px;
        padding-bottom: 50px;

        &-item {
            display: flex;
            align-items: center;
            font-size: @font-size-title;
            font-weight: bold;

            &-logo {
                width: 46px;
                height: 46px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                border-radius: 23px;
                font-size: @font-size-big-title;
                font-weight: bold;
                color: @font-blue-color;
                background: @bg-body-color;
            }

            &-content {
                padding: 0 12px;
                margin-top: 5px;
            }

            &-name {
                .text-ellipsis();
                width: calc(100% - 50px);
                color: @font-title-color;
            }

            &-value {
                display: flex;
                align-items: center;
                color: @theme-light-color;
                margin-top: 10px;

                &-icon {
                    width: 16px;
                    height: 16px;
                    color: @theme-light-color;
                }
                .copy-box {
                    display: inline-grid;
                    align-items: center;
                    justify-content: center;
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    &:hover {
                        background-color: rgb(225, 225, 225);
                    }
                    &-icon {
                        cursor: pointer;
                    }
                    &-value {
                        padding: 1px 2px;
                        .text-ellipsis();
                    }
                }
            }
        }
    }
}
</style>
